<div class="container">
        <Header></Header>
        <div class="home-content">
            <div class="section1 flex-center">
                <div class="section1-content flex-center">
                    <h1>{{$config.name}}</h1>
                    <p>{{$config.desc}}</p>
                    <div style="margin-top: 20px;">
                        <el-button type="primary" size="large" @click="$router.push({path:'/component'})">
                            开始体验
                        </el-button>
                    </div>
                </div>
            </div>
            <div class="section2 flex-center">
                <div class="section2-content flex-center">
                    <div class="section-left flex-center">
                        <h3>一致 Consistency</h3>
                        <p>
                            与现实生活一致： 与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
                            在界面中一致： 所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
                        </p>
                    </div>
                </div>

                <div class="section3-content flex-center">
                    <div class="section-right flex-center">
                        <h3>反馈 Feedback</h3>
                        <p>
                            控制反馈： 通过界面样式和交互动效让用户可以清晰的感知自己的操作；
                            页面反馈： 操作后，通过页面元素的变化清晰地展现当前状态。
                        </p>
                    </div>
                </div>

                <div class="section4-content flex-center">
                    <div class="section-left flex-center">
                        <h3>效率 Efficiency</h3>
                        <p>
                            简化流程： 设计简洁直观的操作流程；
                            清晰明确： 语言表达清晰且表意明确，让用户快速理解进而作出决策；
                            帮助用户识别： 界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <Footer></Footer> 
    <el-backtop  target=".container"  :visibility-height="200"></el-backtop>
</div>